<!--  -->
<template>
  <view class="page">
    <cu-custom
      :needBack="true"
      bgColor="bgNormal"
      topTitle="分配申报组织"
      titleClass="commTitleWhite"
      backIconColor="#fff"
    ></cu-custom>
    <view class="content">
			<view class="form">
				<view class="item">
					<view class="item-title">当前体系</view>
					<view>{{ assessData.name || '--' }}</view>
				</view>
				
				<view class="item">
					<view class="item-title">申报组织</view>
					<view @click="handleMultiple(3)" class="select"  :class="{selected: form.selectOrgValue}">
						<view class="select-val">{{form.selectOrgValue || '请选择'}}</view>
						<view class="icon">
							<u-icon :name="selectMultiple.orgShow ? 'arrow-up-fill' : 'arrow-down-fill' " color="#c0c4cc" size="25"></u-icon>
						</view>
					</view>
				</view>
				
				<view class="item">
					<view class="item-title">选择指标</view>
					<!-- 类别 -->
					<view class="index-box">
						<view class="cate-lists">
							<view class="list-title">申报类型</view>
							<view v-for="(item, index) in categoryList" :key="index" @click="loadIndexList(item.id)" class="comm-item" :class="{act: typeId == item.id}">
								{{ item.type || '--' }}
							</view>
						</view>
						<!-- 指标 -->
						<view class="index-lists">
							<view class="list-title">
								<view>指标列表 ({{ targetIds.length || 0 }})</view>
								<view @click="targetIds = []" class="reset">清空选项</view>
							</view>
							<view v-for="(item, index) in indexList" :key="index" @click="chooseIndex(item.id)" class="comm-item" :class="{act: targetIds.includes(item.id)}">
								{{ item.target || '--' }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="footer">
				<u-button @click="confirm" class="btn" type="primary">确认保存</u-button>
			</view>
    </view>
		
		<!-- 选择申报组织 -->
		<multiple-picker 
				title="请选择组长" 
				:show="selectMultiple.orgShow" 
				:columns="orgList" 
				:isMultiple="selectMultiple.isMultiple"
				:defaultIndex="selectMultiple.index" 
				idKey="id"
				label="createUserName"
				@confirm="confirmMultiple" 
				@cancel="selectMultiple.orgShow = false"
		></multiple-picker>
		
  </view>
</template>

<script>
import { getCurrentDeclarationSystem3 } from "@/api/home"
import { orgPage, getExpertGroup, indexCategoryList, indexListByCate, setApplyOrg } from "@/api/expertManager.js";
export default {
  data() {
    return {
			assessData: '',
			expertId: '',
			form: {
				selectOrgValue: '',
				selectOrgIndex: []
			},
      detail: [],
			selectType: 1, // 1 组长  2 组员 
			selectMultiple: {
				show: false,
				orgShow: false,
				isMultiple: true,
				index: []
			},
			orgList: [],
			indexLoading: true,
			typeId: '',
			firstTypeId: '',
			categoryList: [],
			indexList: [],
			targetIds: [],
			declarationInfoOldIds: [],
			memberIds: []
    };
  },
  onLoad(options) {
		this.expertId = options.expertId || ''
		if (options.targetIds) {
			this.targetIds = options.targetIds.split(',').map(v => parseInt(v))
			console.log('targetIds', this.targetIds);
		}
		this.loadCurrentAssess()
		this.loadOrgList()
		this.loacCategoryList()
  },
  methods: {
		// 保存
		confirm() {
	
			// 发送参数
			let params = {
				expertGroupId: this.expertId,
				declarationInfoIds: [...this.declarationInfoOldIds, ...this.form.selectOrgIndex],
				targetIds: this.targetIds,
				memberIds: this.memberIds
			}
			console.log('params', params);
			setApplyOrg(params).then(res => {
				if (res.code == 200) {
					this.showToast('保存成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					this.showToast(res.msg)
				}
			})
			
		},
		// 选择指标
		chooseIndex (indexId) {
			let index = this.targetIds.findIndex(v => v == indexId)
			if (index != -1) {
				this.targetIds.splice(index, 1)
			} else {
				this.targetIds.push(indexId)
			}
		},
		// 打开选择
		handleMultiple(selectType) {
			this.selectMultiple.index = this.form.selectOrgIndex || []
			this.selectMultiple.isMultiple = true
			this.selectMultiple.orgShow  = true
		},
		// 确认选择
		confirmMultiple(e) {
			console.log(e);
			let temp = [];
			e.selected.forEach(item => {
					temp.push(item.label);
			})
			this.form.selectOrgValue = temp.toString()
			this.form.selectOrgIndex = e.value
			this.selectMultiple.orgShow  = false
		},
		// 加载类别
		loacCategoryList() {
			indexCategoryList({ isLastReq: false }).then(res => {
				this.categoryList = res.data || []
				if (this.categoryList.length > 0) {
					this.firstTypeId = this.categoryList[0].id
					this.loadIndexList(this.firstTypeId)
				}
			})
		},
		// 加载指标
		loadIndexList(typeId) {
			this.typeId = typeId
			this.indexLoading = true
			let params = {
				parentId: 0,
				socialOrganizationTypeId: typeId
			}
			indexListByCate(params).then(res => {
				this.indexList = res.data || []
			}).finally(e => {
				this.indexLoading = false
			})
		},
		showToast(title) {
			uni.showToast({
			  title,
			  icon: "none"
			})
		},
		loadCurrentAssess() {
			getCurrentDeclarationSystem3({ isLastReq: false }).then(res => {
				if (res.code == 200) {
					this.assessData = res.data || {}
					this.loadDetail()
				}
			})
		},
		// 获取详情
		loadDetail() {
			let params = {
				id: this.expertId,
				isLastReq: false
			}
			getExpertGroup(params).then(res => {
				if (res.code == 200) {
					let data = res.data || {}
					// 解析值回显
					// this.targetIds = data.targetRecordIds || []
						
					const declarationInfo = []
					const declarationInfoOldIds = []
					data.declarationInfos.forEach(item => {
						if (item.declarationSystemId == this.assessData.id) {
							declarationInfo.push(item)
						} else {
							declarationInfoOldIds.push(item.id)
						}
					})
					this.memberIds = data.members.map(item => item.userId)
					this.declarationInfoOldIds = declarationInfoOldIds
					
					let tempForm = {}
					tempForm.selectOrgValue = declarationInfo.map(v => v.userName).join(',')
					tempForm.selectOrgIndex = declarationInfo.map(v => v.id + '')
					this.form = tempForm
				}
			})
		},
		loadOrgList() {
			let params = {
				current: 1,
		    size: 1000,
		    currentDeclarationSystem: 1,
				isLastReq: false
		  }
		  orgPage(params).then((res) => {
		    if (res.code == 200) {
		      this.orgList = res.data?.resultPage?.records || []
					console.log('orgList', this.orgList);
		    } else {
		      this.showToast(res.msg)
		    }
		  });
		}
  },
  components: {},
};
</script>
<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
}
.content {
	flex: 1;
	width: 100%;
  font-size: 28rpx;
  color: #999;
	background: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
}
.footer {
	padding: 30rpx;
	border-top: 1px solid #efefef;
}
.form {
	flex: 1;
	padding: 25rpx;
	width: 100%;
	box-sizing: border-box;
	overflow: auto;
	.red {
		color: red;
		padding-right: 5rpx;
	}
	.item {
		width: 100%;
		margin-bottom: 25rpx;
		padding: 15rpx 10rpx;
		border-bottom: 1px solid #efefef;
		.item-title {
			width: 145rpx;
			margin-bottom: 20rpx;
		}
		.select {
			flex: 1;
			display: flex;
			padding-bottom: 10rpx;
			color: #c0c4cc;
			.select-val {
				flex: 1;
			}
			.icon {
				width: 32rpx;
				text-align: right;
			}
			&.selected {
				color: black;
			}
		}
		.index-box {
		  width: 100%;
		  min-height: 600rpx;
		  border: 1px solid #e8e8e8;
		  display: flex;
		  line-height: normal;
		  .cate-lists {
				flex: 1;
		    border-right: 1px solid #e8e8e8;
		    padding: 20rpx 20rpx;
		    overflow: auto;
		  }
		  .index-lists {
		    flex: 1;
				padding: 20rpx 20rpx;
		    position: relative;
		    overflow: auto;
		    .ant-spin-spinning {
		      width: 85%;
		      height: 80%;
		      overflow: hidden;
		      position: absolute;
		      display: flex;
		      align-items: center;
		      justify-content: center;
		      z-index: 1;
		    }
		  }
		  .list-title {
				color: #000;
		    padding-bottom: 20rpx;
		    font-weight: bold;
		    display: flex;
		    justify-content: space-between;
		    .reset {
		      cursor: pointer;
		    }
		  }
		  .comm-item {
		    padding: 10rpx 20rpx;
		    background-color: #efefef;
		    border-radius: 10rpx;
		    margin-bottom: 20rpx;
		    cursor: pointer;
		  }
		  .comm-item.act {
		    color: #fff;
		    background-color: #1890ff;
		  }
		}
	}
	.item:last-child {
		border-bottom: none;
	}
}
</style>
